<template>
  <div class="layout-container">
    <div class="layout" v-for="layout in layouts" :key="layout.index">
      <img :src="require(`../assets/survey/layout${layout.index}.png`)">
      <p>{{layout.description}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  data(){
    return{
      layouts:[
        {
          index: 1,
          description: `在传统的单位大院格局中，南部为作为大院根基的生产区，北部为配套的职工及家属生活区；单位大院往往强调内部归属性，常有院墙设置`
        },
        {
          index: 2,
          description: `现在，南侧的生产区已被改造为文创产业园，大院范围退缩到仅含北部生活区；上世纪九十年代商品房的引入，使得该住区的企业归属被削弱，内部住户复杂化`
        }
      ]
    }
  },
  mounted(){
    /*添加页面滚动到当前位置时出现的效果*/
    const images = document.querySelectorAll('.layout > img')
    function scrollShow(){
      images.forEach(element => {
        const top = element.getBoundingClientRect().top
        if(top < 400){
          element.classList.add('wow')
        }
      })
    }
    window.addEventListener('scroll', scrollShow)
  },
  beforeDestroy(){
    window.removeEventListener('scroll', this.scrollShow)
  }
}
</script>

<style scoped>
.layout-container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 100%;
}

.layout-container > .layout{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  width: 40%;
  position: relative;
}

.layout > img{
  width: 60%;
  opacity: 0;
}

.layout > img.wow{
  opacity: 1;
  animation: fadeUp 1s ease-out;
}

.layout > p{
  margin: 2rem 0;
}

@keyframes fadeUp {
  0%{
    opacity: 0;
    transform: translateY(20%);
  }
}

@media screen and (max-width: 767px) {
  .layout-container{
    flex-direction: column;
  }
  .layout-container > .layout{
    width: 80%;
  }
}

</style>